<w-permit name="CAN_LEASE_TRANSACTION" mode="on">
    <w-step-by-step active-step="$ctrl.step">
        <w-step>
            <div class="margin-top-4">
                <form name="lease" novalidate>
                    <div class="row">
                        <div class="margin-05 body-2 basic-900" w-i18n="modal.startLease.balance"></div>
                        <div class="input-like flex-row split-half">
                            <div class="flex-row">
                                <w-asset-logo size="24"
                                              asset-id="$ctrl.assetId"></w-asset-logo>
                                <div class="asset-name">{{$ctrl.balance.asset.name}}</div>
                            </div>
                            <div>
                                <w-balance money="$ctrl.balance"></w-balance>
                                <span>&nbsp{{$ctrl.balance.asset.displayName}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="flex-row-title">
                            <div class="margin-05 body-2 basic-900" w-i18n="modal.startLease.recipient"></div>
                            <a
                                    class="link"
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    ng-href="{{::$ctrl.nodeListLink}}"
                            >
                                <span w-i18n="modal.startLease.nodeListLink"></span>
                            </a>
                        </div>

                        <w-input-container>
                            <w-input class="big"
                                     type="text"
                                     w-validate
                                     w-validator-waves-address="no-self"
                                     name="recipient"
                                     ng-model="$ctrl.recipient"
                                     required></w-input>

                            <w-input-error message="wavesAddress">
                                <span w-i18n="modal.send.errors.address"></span>
                            </w-input-error>
                            <w-input-error message="required">
                                <span w-i18n="modal.send.errors.required"></span>
                            </w-input-error>
                        </w-input-container>
                    </div>
                    <div class="row">

                        <div class="margin-05 body-2 basic-900" w-i18n="modal.startLease.amount"></div>

                        <w-input-container>
                            <w-balance-input name="amount"
                                             asset-id="$ctrl.assetId"
                                             max-balance="$ctrl.balance"
                                             min="0"
                                             fee="$ctrl.fee"
                                             input-classes="big"
                                             amount="$ctrl.amount"></w-balance-input>
                            <w-input-error name="amount" message="required">
                                <span w-i18n="inputs.errors.required"></span>
                            </w-input-error>
                            <w-input-error name="amount" message="gt">
                                <span ng-if="$ctrl.amount.getTokens().eq(0)" w-i18n="inputs.errors.required"></span>
                                <span ng-if="$ctrl.amount.getTokens().gt(0)" w-i18n="inputs.errors.gtGatewayMin"
                                      params="{min: $ctrl.minimumAmount, assetName: $ctrl.tx.amount.asset.displayName}">
                        </span>
                            </w-input-error>
                            <w-input-error name="amount" message="precision">
                            <span w-i18n="modal.send.errors.precision"
                                  params="{precision: $ctrl.state.moneyHash[$ctrl.state.assetId].asset.precision}"></span>
                            </w-input-error>
                            <w-input-error name="amount" message="lte">
                        <span ng-if="!$ctrl.tx.amount.getTokens().gte($ctrl.gatewayDetails.maximumAmount)"
                              w-i18n="modal.send.errors.max">
                        </span>
                                <span ng-if="$ctrl.tx.amount.getTokens().gte($ctrl.gatewayDetails.maximumAmount)"
                                      params="{money: $ctrl.maxGatewayAmount}"
                                      w-i18n="modal.send.errors.maxCoinomat">
                        </span>
                            </w-input-error>
                        </w-input-container>
                    </div>
                    <div class="row basic-500 margin-2">
                        <span w-i18n="modal.startLease.fee" params="{fee: $ctrl.fee}"></span>
                    </div>
                    <w-sign-button disabled="lease.$invalid"
                                   on-click="$ctrl.sign()"
                                   on-success="$ctrl.next(signable)"
                                   class="submit big long">
                        <span w-i18n-ns="app.utils" w-i18n="modal.startLease.start"></span>
                    </w-sign-button>
                </form>
            </div>
        </w-step>
        <w-step>
            <w-confirm-transaction on-click-back="$ctrl.back()" signable="$ctrl.signable"></w-confirm-transaction>
        </w-step>
    </w-step-by-step>
</w-permit>
<w-permit name="CAN_LEASE_TRANSACTION" mode="off">
    <div class="center">
        <svg width="80px" height="80px" viewBox="0 0 80 80" version="1.1" class="margin-3 margin-top-6"
             xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <title>Icon/80/error-80-error500</title>
            <g id="Icon/80/error-80-error500" stroke="none" stroke-width="1" fill="none"
               fill-rule="evenodd">
                <path
                        d="M40,77 C60.4345357,77 77,60.4345357 77,40 C77,19.5654643 60.4345357,3 40,3 C19.5654643,3 3,19.5654643 3,40 C3,60.4345357 19.5654643,77 40,77 Z M40,80 C17.90861,80 0,62.09139 0,40 C0,17.90861 17.90861,0 40,0 C62.09139,0 80,17.90861 80,40 C80,62.09139 62.09139,80 40,80 Z"
                        id="Oval" fill="#EF4829" fill-rule="nonzero"></path>
                <path
                        d="M42.1213203,40 L55.5563492,53.4350288 C56.1421356,54.0208153 56.1421356,54.9705627 55.5563492,55.5563492 C54.9705627,56.1421356 54.0208153,56.1421356 53.4350288,55.5563492 L40,42.1213203 L26.5649712,55.5563492 C25.9791847,56.1421356 25.0294373,56.1421356 24.4436508,55.5563492 C23.8578644,54.9705627 23.8578644,54.0208153 24.4436508,53.4350288 L37.8786797,40 L24.4436508,26.5649712 C23.8578644,25.9791847 23.8578644,25.0294373 24.4436508,24.4436508 C25.0294373,23.8578644 25.9791847,23.8578644 26.5649712,24.4436508 L40,37.8786797 L53.4350288,24.4436508 C54.0208153,23.8578644 54.9705627,23.8578644 55.5563492,24.4436508 C56.1421356,25.0294373 56.1421356,25.9791847 55.5563492,26.5649712 L42.1213203,40 Z"
                        id="Combined-Shape" fill="#EF4829"></path>
            </g>
        </svg>
    </div>
    <h3 class="basic-700 margin-3 center"
        w-i18n="modal.startLease.title"></h3>
    <div class="plate-warning warning-500">
        <span w-i18n="modal.disabledFeature.lease" class="body-1"></span>
    </div>
</w-permit>
